import { createApp } from "vue"
import pinia from "./stores"
import ElementPlus from "element-plus"
import zhCn from "element-plus/es/locale/lang/zh-cn"
import "element-plus/dist/index.css"
import App from "./App.vue"
import router from "./router"
import "./styles/index.scss"
import ElSvg from "./components/SvgIcon/ElSvg"
import "./permission"
import Category from "./components/Category/index.vue"
import { useUserInfoStore } from "@/stores/userInfo"

const userInfoStores = useUserInfoStore()

const app = createApp(App)

ElSvg(app)

//全局注册自定义指令，用来控制按钮权限
app.directive("has", (el, binding) => {
  //判断当前的has指令的值binding.value 在不在所有按钮权限控制中  userInfoStore.userInfo.buttons中
  //如果不在，则不显示该按钮，直接在所有的按钮中去除该按钮，可以是按钮，也可以是其他元素，比如a标签，只是按钮情况多一些，所以称为按钮权限
  if (!userInfoStores.userInfo.buttons.includes(binding.value)) {
    el.remove()
  }
})

app
  .use(pinia)
  .use(router)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .component("Category", Category)
  .mount("#app")
